<template>
  <div>
    <div class="div_display_inline_block div_right_add_friend_type_one"
         :class="[classShow? 'div_show_check_type_show' : 'div_show_check_type_not_show']"
         @click="changeSearchTypeToFriend">
      找好友
    </div>
    <div class="div_display_inline_block div_right_add_friend_type_two"
         :class="[!classShow? 'div_show_check_type_show' : 'div_show_check_type_not_show']"
         @click="changeSearchTypeToGroup">
      找群
    </div>
  </div>
</template>

<script>
export default {
  name: "right_add_friend_type",
  data() {
    return {
      classShow: true
    }
  },
  methods: {
    changeSearchTypeToFriend() {
      this.classShow = true
      // 修改状态.
      this.$store.commit('setRightStatusAddFriendType', 0)
    },
    changeSearchTypeToGroup() {
      this.classShow = false
      this.$store.commit('setRightStatusAddFriendType', 1)
    },
  },
}
</script>

<style scoped>

.div_display_inline_block {
  display: inline-block;
  margin-top: 50px;
  text-align: center;
}

.div_right_add_friend_type_one {
  margin-left: 400px;
  width: 56px;
}

.div_right_add_friend_type_two {
  margin-left: 50px;
  width: 45px;
}

.div_show_check_type_show {
  border-bottom: 2px #1e6fff solid;
  color: #0188fb;
}

/* 不能去掉.*/
div_show_check_type_not_show {

}


</style>